<script setup lang="ts">
import { ref } from 'vue';
import AuthBar from '@/components/authBar/index.vue';
import { buildAssetSource } from '@/utils';
import Steps from './components/steps.vue';

const percentage = ref(30);
</script>

<template>
  <view class="print-service flex-col">
    <Steps />
    <AuthBar back-home />
    <view class="flex-1 overflow-auto pb-40">
      <view class="print-service__title mt-50">
        确认打印
      </view>
      <view class="print-service__subtitle mt-16">
        请不要关闭页面或操作设备
      </view>

      <view class="print-service__content pb-24 pt-80">
        <view class="print-service__cover flex-center">
          <image :src="buildAssetSource('print-cover.png')" class="h-440 w-400" />
        </view>

        <view class="print-progress__wrapper">
          <view class="print-service__progress">
            <view class="flex items-center justify-between">
              <view class="print-progress__title">
                打印进度
              </view>
              <view class="print-progress__value">
                {{ percentage }}%
              </view>
            </view>
            <view class="print-progress__bar mt-12">
              <wd-progress :percentage="percentage" hide-text />
            </view>
          </view>

          <view class="print-service__info mt-53">
            <view class="print-info__title">
              正在打印第2份，共5份报告
            </view>
            <view class="print-info__desc">
              请确保出纸口通畅，不要触摸正在打印的纸张
            </view>
          </view>
        </view>

        <view class="print-service__loading mt-68 flex-center">
          <image :src="buildAssetSource('loading.png')" class="h-80 w-80 animate-spin" />
          <view class="print-loading__desc">
            正在处理中...
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<route type="page" lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '打印服务',
    navigationStyle: 'custom'
  }
}
</route>

<style lang="scss" scoped>
.print-service {
  height: 100%;
  background-color: var(--bg-color);

  .print-service__title {
    font-size: 60px;
    font-weight: bold;
    color: var(--text-color);

    text-align: center;
  }

  .print-service__subtitle {
    color: var(--secondary-text-color);
    font-size: 28px;
    text-align: center;
  }

  .print-service__content {
    background: #e2ecfc;
    border-radius: 20px;
    margin: 60px 48px 0;
  }

  .print-progress__wrapper {
    margin: 0 102px;
  }

  .print-service__progress {
    .print-progress__title {
      font-size: 36px;
      font-weight: 500;
      color: var(--text-color);
    }

    .print-progress__value {
      color: var(--primary);
      font-size: 36px;
      font-weight: 500;
    }

    .print-progress__bar {
      --wot-progress-height: 29px;
      --wot-progress-bg: #c0dcff;
      --wot-progress-color: var(--primary);
    }
  }

  .print-service__info {
    background: rgba(247, 250, 254, 0.5);
    border-radius: 20px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    padding: 55px 0;
    .print-info__title {
      text-align: center;
      font-size: 32px;
      font-weight: 500;
      color: var(--text-color);
    }
    .print-info__desc {
      text-align: center;
      font-size: 24px;
      color: var(--secondary-text-color);
      margin-top: 24px;
    }
  }

  .print-loading__desc {
    color: #5b5b5b;
    font-size: 30px;
    margin-left: 12px;
  }
}
</style>
